<template>
	<div class="mainos">
		<div class="main_spac1 paddingBottom5">
			<div class="main_white padding10 paddingBottom20">
				<div class="main_crumbs boxdq">
					<div class="main_crumbs_l">
						<a href="javascript:;" @click="$router.back(-1)">
							<i class="el-icon-arrow-down"></i>返回
						</a>
						<em>|</em>
						<span>查看</span>
					</div>
					<div class="main_crumbs_rt">
						<el-button
							v-if="info.info.type == 1"
							v-repeatClick
							class="marginLeft5"
							@click="print"
							>打印</el-button
						>
						<el-popconfirm
							title="您确定导出当前的在线支付账单详情吗？"
							@onConfirm="exportOrderiInfo"
						>
							<!-- style="background-color: #03a98e; color: #fff" -->
							<el-button slot="reference">导出</el-button>
						</el-popconfirm>
					</div>
				</div>
				<div class="main_tile boxdq marginTop10">
					<div class="main_tile_l marginLeft0"><em></em>基础信息</div>
				</div>
				<div class="main_xq">
					<ul class="boxha">
						<li>
							原始单号：<span>{{ info.info.related_order_sn }}</span>
						</li>
						<li v-if="type == 2">
							单据类型：<span>{{
								info.info.type == 1 ? "订单" : "退货单"
							}}</span>
						</li>
						<li v-if="type == 1">
							配送日期：<span>{{
								info.info.related_time
									? parseTime(info.info.related_time, "{y}-{m}-{d}")
									: ""
							}}</span>
						</li>
						<li>
							用户名称：<span>{{ info.info.nickname }}</span>
						</li>
						<li>
							账单号：<span>{{ info.info.order_sn }}</span>
						</li>
						<li>
							账单日期：<span>{{
								info.info.created_at
									? parseTime(info.info.created_at, "{y}-{m}-{d}")
									: ""
							}}</span>
						</li>
						<li v-if="type == 1">
							下单原价：<span>{{ info.info.order_money }}</span>
						</li>
						<li v-if="type == 1">
							配送金额：<span>{{ info.info.send_money }}</span>
						</li>
						<li>
							账单金额：<span>{{
								type == 1 ? info.info.account_money : -info.info.account_money
							}}</span>
						</li>
						<li v-if="type == 1">
							差异金额：<span>{{ info.info.diff_money }}</span>
						</li>
						<li>
							对账状态：<span>{{
								info.account_status_list[info.info.account_status]
							}}</span>
						</li>
						<li>
							结算状态：<span>{{ info.statusList[info.info.status] }}</span>
						</li>
						<li>
							运费：<span>{{ info.info.delivery_fee }}</span>
						</li>
						<li>
							优惠金额：<span>{{ info.info.discount_money }}</span>
						</li>
						<li v-if="type == 1">
							银联单号：<span>{{
								info.info.order ? info.info.order.order_sn_unionpay : ""
							}}</span>
						</li>
						<li>
							业务员：<span>{{
								info.info.salesman ? info.info.salesman.name : ""
							}}</span>
						</li>
						<li>
							回单状态：<span>{{
								info.info.is_receipt == 1 ? "是" : "否"
							}}</span>
						</li>

						<li class="main_w100">
							备注：<span>{{ info.info.remark }}</span>
						</li>
					</ul>
				</div>
				<div class="main_tile boxdq marginTop10">
					<div class="main_tile_l marginLeft0"><em></em>商品详情</div>
					<!-- <div class="mainos_tile_r">合计：{{ total }}元</div> -->
				</div>
				<div class="main_table marginTop0">
					<el-table
						ref="multipleTable"
						v-loading="listLoading"
						:data="info.info.statement_list"
						element-loading-text="加载中"
						fit
						highlight-current-row
						show-summary
						:summary-method="getSummaries"
					>
						<el-table-column label="序号" prop="userId" width="80">
							<template slot-scope="scope">{{ scope.$index + 1 }}</template>
						</el-table-column>
						<el-table-column
							label="商品名称"
							prop="goods_name"
							min-width="150"
							class-name="main_hei"
							align="center"
						>
							<template slot-scope="scope">
								<div
									style="
										display: flex;
										align-items: center;
										justify-content: center;
									"
								>
									<span
										v-if="scope.row.activity_type != 0"
										:class="'active' + scope.row.activity_type"
										>[{{ activity_type_list[scope.row.activity_type] }}]</span
									>
									{{ scope.row.goods_name }}【{{ scope.row.spu_name }}】
								</div>
							</template>
						</el-table-column>
						<el-table-column label="单位" prop="unit" class-name="main_hei" />
						<el-table-column
							label="原下单数量"
							prop="order_num"
							class-name="main_hei"
							min-width="120"
							v-if="type == 1"
						/>
						<el-table-column
							label="原下单单价"
							prop="order_price"
							class-name="main_hei"
							min-width="120"
							v-if="type == 1"
						/>
						<el-table-column
							label="原下单金额"
							prop=""
							class-name="main_hei"
							min-width="120"
							v-if="type == 1"
						>
							<template slot-scope="scope">{{
								(parseFloat(scope.row.order_price) *
									parseFloat(scope.row.order_num))
									| twoPlace
							}}</template>
						</el-table-column>

						<el-table-column
							:label="type == 1 ? '对账数量' : '退货数量'"
							prop="account_num"
							class-name="main_hei"
							min-width="120"
						/>
						<el-table-column
							:label="type == 1 ? '对账单价' : '退货单价'"
							prop="account_price"
							class-name="main_hei"
							min-width="120"
						/>
						<el-table-column
							label="退货金额"
							prop=""
							class-name="main_hei"
							min-width="120"
							v-if="type == 2"
						>
							<template slot-scope="scope">
								{{ parseFloat(scope.row.return_money) | twoPlace }}
							</template>
						</el-table-column>
						<el-table-column
							label="对账金额"
							min-width="120"
							prop=""
							class-name="main_hei"
						>
							<template slot-scope="scope">
								{{ parseFloat(scope.row.account_money) | twoPlace }}
							</template>
						</el-table-column>
						<el-table-column
							label="差异数量"
							prop="diff_num"
							class-name="main_hei"
							min-width="120"
							v-if="type == 1"
						/>
						<el-table-column
							label="差异单价"
							prop="diff_price"
							class-name="main_hei"
							min-width="120"
							v-if="type == 1"
						/>
						<el-table-column
							label="差异金额"
							prop="diff_money"
							class-name="main_hei"
							min-width="120"
							v-if="type == 1"
						/>
						<el-table-column
							label="配送数量"
							class-name="main_hei"
							min-width="120"
							v-if="type == 1"
						>
							<template slot-scope="scope">
								{{ scope.row.send_num }}
							</template>
						</el-table-column>
						<el-table-column
							label="配送单价"
							prop="send_price"
							class-name="main_hei"
							min-width="120"
							v-if="type == 1"
						/>
						<el-table-column
							label="配送金额"
							prop=""
							class-name="main_hei"
							min-width="120"
							v-if="type == 1"
						>
							<template slot-scope="scope">
								{{ parseFloat(scope.row.send_money) | twoPlace }}
							</template>
						</el-table-column>
						<el-table-column
							label="备注"
							min-width="120"
							prop="remark"
							class-name="main_hei"
						/>
					</el-table>
				</div>
				<div class="main_tile boxdq marginTop20">
					<div class="main_tile_l marginLeft0"><em></em>生命周期</div>
				</div>
				<div class="main_table marginTop0">
					<el-table
						ref="multipleTable"
						v-loading="listLoading"
						:data="info.logs"
						element-loading-text="加载中"
						fit
						highlight-current-row
					>
						<el-table-column
							label="管理员"
							prop="admin.name"
							class-name="main_hei"
						/>
						<el-table-column
							label="操作"
							prop="operate.name"
							class-name="main_hei"
						/>
						<el-table-column label="内容" prop="content" class-name="main_hei">
							<template slot-scope="scope">
								<div
									v-for="(content, index) in scope.row.content"
									:key="index"
									class="marginTop5 marginBottom5"
								>
									{{ content }}
								</div>
							</template>
						</el-table-column>
						<el-table-column label="IP" prop="ip" class-name="main_hei" />
						<el-table-column
							label="时间"
							prop="created_at"
							class-name="main_hei"
						>
							<template slot-scope="scope">{{
								parseTime(scope.row.created_at)
							}}</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<!-- 打印子组件 -->
			<order-print
				ref="printTemplate"
				v-show="false"
				id="printname"
			></order-print>
		</div>
	</div>
</template>

<script>
	import {
		statement_info,
		export_online_info_order,
		export_online_info,
	} from "@/api/financial/financialReceivables";
	import { apiUrl, objKeySort, Md5 } from "@/utils/public";
	import { parseTime, exportMethod } from "@/utils/index";
	import OrderPrint from "@/views/order/orderPrint.vue";
	export default {
		components: {
			OrderPrint,
		},
		computed: {
			total() {
				let sz = 0;
				this.info.info.statement_list.forEach((e) => {
					let count = this.$toFixed(parseFloat(e.account_money));
					sz += Number(count);
				});
				return sz ? this.$toFixed(sz) : 0;
			},
		},
		data() {
			return {
				// 时间
				parseTime,
				exportMethod,
				// 基本信息
				info: {
					info: {
						send_time: "2000-01-01",
						type: 0,
						status: 0,
						statement_list: [],
					},
					account_status_list: ["未分拣"],
					statusList: ["未分拣"],
				},
				activity_type_list: [],
				type: "", //1.订单2.退货单
				listLoading: false,
				// id
				id: this.$route.params.id,
			};
		},
		created() {
			// 基本信息
			this.statement_info();
		},
		methods: {
			// 基本信息
			statement_info() {
				let data = Object.assign(
					apiUrl().name,
					{ id: this.id }
				);
				statement_info(data).then((res) => {
					if (res.errcode == 0) {
						if (res.data.logs) {
							res.data.logs.map((e) => {
								if (e.content) {
									e.content = JSON.parse(e.content);
								}
							});
						}
						this.info = res.data;
						this.activity_type_list = res.data.activity_type_list;
						this.type = res.data.info.type;
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			exportOrderiInfo() {
				let func = null;
				let file_name = "";
				if (this.type == 1) {
					// console.log("订单");]
					func = export_online_info_order;
					file_name = "在线支付账单-订单";
				} else if (this.type == 2) {
					// console.log("退货单");
					func = export_online_info;
					file_name = "在线支付账单-退货单";
				}
				let data = Object.assign(
					apiUrl().name,
					{ id: this.id }
				);
				func(data)
					.then((res) => {
						this.exportMethod(res, file_name);
					})
					.catch(() => {
						this.$message.error("导出失败");
					});
			},
			// 打印
			print() {
				let id = this.id;
				this.$refs.printTemplate.$emit("demo", {
					id: id,
					type: "online_payment_order",
				});
			},
			getSummaries(param) {
				const { columns, data } = param;
				const sums = [];
				if (this.type == 1) {
					columns.forEach((column, index) => {
						switch (index) {
							case 0:
								sums[index] = "合计";
								break;
							case 8:
								sums[index] = this.$toFixed(parseFloat(this.total));
								break;
						}
					});
				} else if (this.type == 2) {
					columns.forEach((column, index) => {
						switch (index) {
							case 0:
								sums[index] = "合计";
								break;
							case 6:
								sums[index] = this.$toFixed(parseFloat(this.total));
								break;
						}
					});
				}

				return sums;
			},
		},
	};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainos {
	.main_tile {
		.mainos_tile_r {
			color: $colour_red;
			font-size: $font_14;
		}
	}
	.mainor_ex {
		position: fixed;
		width: 220px;
		height: 100%;
		background: $white;
		box-shadow: 0 6px 10px rgba(0, 21, 41, 0.08);
		top: 0;
		right: 0;
		z-index: 9999;
		transition: all 0.5s;
		transform: translate3d(100%, 0, 0);
		&.on {
			transform: translate3d(0, 0, 0);
		}
		.mainor_exb {
			position: absolute;
			width: 100%;
			height: calc(100% - 60px);
			overflow-y: auto;
			h3 {
				font-size: $font_16;
				color: $colour_18;
				height: 50px;
				line-height: 50px;
				border-bottom: 1px solid $colour_e6;
				padding-left: 20px;
			}
			.mainor_exb_an {
				padding-left: 20px;
				margin-top: 15px;
				/deep/.el-checkbox {
					display: block;
					margin-top: 15px;
					margin-bottom: 15px;
				}
			}
		}
		.mainor_exb_b {
			position: absolute;
			bottom: 0;
			width: 100%;
			border-top: 1px solid $colour_e6;
			height: 55px;
			text-align: center;
			/deep/.el-button--default {
				margin-top: 12px;
				border-color: $subActive;
				color: $menuText;
				&:hover {
					border-color: $menuActiveText;
					color: $menuActiveText;
				}
			}
		}
	}
}
.active1 {
	// 满减
	color: #118ab2;
}
.active2 {
	// 满赠
	color: #03a98e;
}
.active3 {
	// 特卖
	color: #aacd6e;
}
.active4 {
	// 积分
	color: #073b4c;
}
.active5 {
	// 曾品
	color: #f56c6c;
}
</style>
